<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="天梯榜排行" />
		<view class="list-Ladder-backView">
			<view class="list-top-banner"></view>
			<view class="list-topMenu-backView">
				<view class="list-topMenu-weeks">
					<beePlanRankselect ref="select" :options="cycleList" :defaultOption="nomolCyc" selectkey="cycid"
						text="cycname" @change="cycChange" @closeOther="closeOther1"></beePlanRankselect>
				</view>
				<view class="list-topMenu-weeks">
					<beePlanRankselect ref="select1" :options="addressList" :defaultOption="nomolAdd" selectkey="adsid"
						text="adsname" @change="addressChange" @closeOther="closeOther2"></beePlanRankselect>
				</view>
				<view class="list-topMenu-weeks">
					<beePlanRankselect ref="select2" :options="projectList" :defaultOption="nomolPro" selectkey="proid"
						text="proname" @change="proChange" @closeOther="closeOther3"></beePlanRankselect>
				</view>
				<view class="list-topMenu-describe" @click="showMessageTap">
					<image class="describe-image" src="../../static/image/fjh/beeplan-describe-white.png">
					</image>
				</view>
			</view>
			<view class="select-menu-describeView" v-if="selected.laddersType == '2'">
				<image class="describeImageClass" mode="aspectFit" :src="laddersName"></image>
			</view>
			<view class="select-menu-describeView" v-if="selected.laddersType == '1'">
				<image class="describeImageClass" mode="aspectFit"
					src="../../static/image/fjh/fengjihua_yuebang.png"></image>
			</view>
			<view class="select-menu-describeView" v-if="selected.laddersType == '0'">
				<image class="describeImageClass" mode="aspectFit"
					src="../../static/image/fjh/fengjihua_zhoubang_text.png"></image>
			</view>
			<view class="top-menu">
			</view>
			<scroll-view class="list-ranking-contnet" scroll-y="true" :style="'height:' + scroll_height + 'px;'"
				v-if="isShowRankList">
				<block v-for="(item, index) in studentList" :key="index">
					<view class="list-userInfo-backview" @click="userInfoTap" :data-index="index">
						<view class="list-userInfo-content">
							<view class="list-userInfo-rank">{{index + 1}}</view>
							<view class="list-userInfo-listheadImg" :style="{'background-image': `url(${item.userPicUrl})`}"></view>
							<view class="list-userInfo-listname">{{item.username}}</view>
							<image class="list-userInfo-rankImg" src="../../static/image/fjh/icon_1st.png"
								v-if="index == 0"></image>
							<image class="list-userInfo-rankImg" src="../../static/image/fjh/icon_2nd.png"
								v-if="index == 1"></image>
							<image class="list-userInfo-rankImg" src="../../static/image/fjh/icon_3rd.png"
								v-if="index == 2"></image>
						</view>
						<view class="list-userInfo-city">{{item.provinceNameAndCityName}}</view>
						<view class="list-userInfo-seletStr"><text class="numberColor">{{item.param}}</text></view>
					</view>
				</block>
			</scroll-view>
			<scroll-view class="list-ranking-contnet" scroll-y="true"
				:style="'height:' + (scroll_height + (isShowRankList ? 0 : 60)) + 'px;'" v-if="!isShowRankList">
				<block v-for="(item,index) in screeningDataList" :key="index">
					<view class="list-screening-backview" @click="CheckTheDetails" :data-index="index">
						<view class="list-screening-content" v-if="selected.laddersType == '0'">{{item.year}}年
							<view class="weekNumberDayClass">
								<text class="whiteColor">第{{item.week}}周</text>
								<text class="whiteColor">{{item.timeTag}}</text>
							</view>
							周榜
						</view>
						<view class="list-screening-content" v-if="selected.laddersType == '1'">{{item.year}}年
							<text class="whiteColor mouthFontSize">{{item.month}}月</text> 月榜
						</view>
						<view class="list-screening-OnLadders" v-if="item.isOnLadders == 'true'">榜上有名</view>
						<view class="list-screening-result red" v-if="item.isEnd == 1">已公布</view>
						<view class="list-screening-result green" v-else>统计中</view>
					</view>
				</block>
			</scroll-view>
			<view class="userInfo-bottom-lineView"></view>
			<view class="list-userinfo-self" :style="{ height: bottomHeight + 'px'}" v-if="isShowRankList">
				<view class="list-userInfo-content">
					<view class="list-userSelfInfo-rank">{{userRankData.rank == -1 ? '未入榜' : userRankData.rank}}</view>
					
					<view class="list-userInfo-listheadImg" :style="{'background-image': `url(${userRankData.userPicUrl})`}"></view>
					<view class="list-userselfInfo-listname">{{userRankData.username}}</view>
				</view>
				<view class="list-userSelf-city">{{userRankData.provinceNameAndCityName}}</view>
				<view class="list-userSelf-seletStr" v-if="selected.name !== '综合'"><text
						class="userSelfNumberColor">{{userRankData.param}}</text></view>
			</view>
		</view>
		<popPromptBox v-if="showPromptbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
		<beePlanSpellerPopView v-if="isShowPopView" @hidePromptbox="hidePromptbox" :userinfo="userinfo">
		</beePlanSpellerPopView>
	</scroll-view>
</template>

<script>
	import beePlanRankselect from '../../components/planBeeCom/beePlanRankselect.vue'
	import beePlanSpellerPopView from '../../components/planBeeCom/beePlanSpellerPopView.vue'
	export default {
		components: {
			beePlanRankselect,
			beePlanSpellerPopView
		},
		data() {
			return {
				scroll_height: 0,
				bottomHeight: 0,
				laddersName: '',
				showPromptbox: false,
				isShowPopView: false,
				cycleList: [{
						cycid: '1',
						cycname: '月榜'
					},
					{
						cycid: '0',
						cycname: '周榜'
					}
				],
				addressList: [{
					adsid: '1',
					adsname: '地区排行'
				}, ],
				projectList: [{
						proid: '0',
						proname: '掌握数量'
					},
					{
						proid: '2',
						proname: '打卡天数'
					},
				],
				nomolCyc: {
					id: '2',
					name: '赛季榜'
				},
				nomolAdd: {
					id: '0',
					name: '全国排行'
				},
				nomolPro: {
					id: '4',
					name: '累计打卡'
				},
				selected: {
					laddersType: '2',
					districtId: '0',
					orderType: '4',
					name: '累计打卡',
				},
				studentList: [],
				isShowRankList: true, //是否显示排行UI，默认显示
				userRankData: {},
			}
		},
		mounted() {
			var formData = this.selected;
			this.getBeeplanlist(formData);
		},
		onUnload() {
			this.closeAllSelectPop();
		},
		onReady() {
			const that = this
			this.bottomHeight = this.$util.getBottomHeight() + 60;
			uni.createSelectorQuery().select('.top-menu').boundingClientRect(rect => {
				that.scroll_height = uni.getSystemInfoSync().windowHeight - rect.bottom - this.bottomHeight;
			}).exec();
		},
		methods: {
			//显示个人信息弹窗
			userInfoTap: function(e) {
				this.closeAllSelectPop();
				let Index = Number(e.currentTarget.dataset.index);
				this.userinfo = this.studentList[Index];
				this.isShowPopView = true;
			},
			//关闭所有筛选框
			closeAllSelectPop: function() {
				this.$refs.select.closePopview();
				this.$refs.select1.closePopview();
				this.$refs.select2.closePopview();
			},
			cycChange: function(e) {
				var selectData = this.selected;
				selectData.laddersType = {
					...e
				}.id;
				delete selectData.beePlanLaddersManageId;
				this.selected = selectData;
				if (selectData.laddersType == '2') {
					var formData = this.selected;
					this.getBeeplanlist(formData);
				} else {
					var formData = {
						'laddersType': selectData.laddersType,
						'userId': this.$util.getUserID(),
					}
					this.getBeePlanLaddersManageList(formData);
				}
			},
			addressChange: function(e) {
				var selectData = this.selected;
				selectData.districtId = {
					...e
				}.id;
				this.selected = selectData;
				if ((this.selected.laddersType == '0' || this.selected.laddersType == '1') && this
					.isShowRankList == false) {
					return;
				} else {
					var formData = this.selected;
					this.getBeeplanlist(formData);
				}
			},
			proChange: function(e) {
				console.log('e', e);
				var selectData = this.selected;
				selectData.orderType = {
					...e
				}.id;
				selectData.name = {
					...e
				}.name;
				this.selected = selectData;
				if ((this.selected.laddersType == '0' || this.selected.laddersType == '1') && this
					.isShowRankList == false) {
					return;
				} else {
					var formData = this.selected;
					this.getBeeplanlist(formData);
				}
			},
			closeOther1: function() {
				this.$refs.select1.closePopview();
				this.$refs.select2.closePopview();
			},
			closeOther2: function() {
				this.$refs.select.closePopview();
				this.$refs.select2.closePopview();
			},
			closeOther3: function() {
				this.$refs.select.closePopview();
				this.$refs.select1.closePopview();
			},
			//获取排行榜数据
			getBeeplanlist: function(formData) {
				console.log('formData', formData);
				var that = this;
				that.$http.getBeePlanLaddersList(formData).then(res => {
					if (res.code == 200) {
						this.isShowRankList = true;
						this.laddersName = res.data.laddersName;
						this.userRankData = res.data.userRankData;
						this.studentList = res.data.rankingList;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//获取周榜、月榜列表
			getBeePlanLaddersManageList: function(formData) {
				var that = this;
				that.$http.getBeePlanLaddersManageList(formData).then(res => {
					console.log('getBeePlanLaddersManageList', res);
					if (res.code == 200) {
						this.laddersName = formData.laddersType == '0' ? '蜂计划周榜' : '蜂计划月榜';
						this.isShowRankList = false;
						this.screeningDataList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 周榜、月榜查看详情
			CheckTheDetails: function(e) {
				let Index = Number(e.currentTarget.dataset.index);
				var selectData = this.selected;
				selectData.beePlanLaddersManageId = this.screeningDataList[Index].id;
				this.getBeeplanlist(selectData);
			},
			//展示排行榜规则
			showMessageTap: function() {
				this.message = '掌握数量：\n根据用户“已掌握单词”的数量进行排名。\n打卡天数：\n根据用户“累计打卡”的天数进行排名。';
				this.showPromptbox = true;
			},
			//隐藏用户信息弹窗
			hidePromptbox: function() {
				this.showPromptbox = false;
				this.isShowPopView = false;
			},
			//荣誉榜详情
			honorTap: function() {
				uni.navigateTo({
					// 	url: '/wordClock/pages/wordClickListofLadderViews/wordClickListofLadderViews',
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-Ladder-backView {
		width: 100%;
		height: 100%;
		background-color: black;
	}

	.list-top-banner {
		width: 100%;
		height: 75px;
		background-image: url(../../static/image/fjh/fengjihua_banner_little.png);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.list-topMenu-backView {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		background-color: #000000;
		justify-content: space-around;
		align-items: center;
	}

	.describeImageClass {
		width: 177px;
		height: 22px;
	}

	.list-topMenu-weeks {
		width: 100px;
		height: 25px;
	}

	.list-topMenu-weeksStr {
		font-size: 13px;
		text-align: center;
		width: 100%;
		color: black;
	}

	.list-topMenu-weeksImg {
		width: 30px;
		height: 30px;
	}

	.list-topMenu-describe {
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.describe-image {
		width: 20px;
		height: 20px;
	}

	.select-menu-describeView {
		width: 100%;
		height: 30px;
		line-height: 30px;
		background-color: #000000;
		color: white;
		text-align: center;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.list-rankingtop-view {
		width: 100%;
		height: 150px;
		display: flex;
		flex-direction: column;
		background-image: url(../../static/image/fjh/dingdan_back.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		background-color: white;
	}

	.list-rankingtop-child1 {
		width: 100%;
		height: 75px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
	}

	.list-rankingtop-child2 {
		width: 100%;
		height: 75px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: relative;
		top: -55px;
	}

	.list-userInfo-view {
		width: 175px;
		height: 75px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list-userInfo-rank {
		font-size: 14px;
		color: black;
		height: 25px;
		line-height: 25px;
		margin-left: 5px;
		width: 35px;
		text-align: center;
	}

	.list-userSelfInfo-rank {
		font-size: 14px;
		color: white;
		height: 25px;
		line-height: 25px;
		margin-left: 5px;
		width: 50px;
		text-align: center;
	}

	.list-userInfo-rankbottom {
		font-size: 14px;
		color: black;
		height: 25px;
		line-height: 25px;
		margin-left: 15px;
		text-align: center;
	}

	.list-userInfo-headImg {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		border: 1.5px solid #ffd83f;
	}

	.list-userInfo-listheadImg {
		width: 40px;
		height: 40px;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 20px;
		border: 1.5px solid #ffd83f;
	}

	.list-userInfo-name {
		width: 175px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		color: black;
		font-size: 13px;
	}

	.list-ranking-contnet {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: black;
	}

	.list-userInfo-backview {
		width: 100%;
		height: 55px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: var(--themeGradientTopBack);
		margin-top: 5px;
		justify-content: space-between;
	}

	.list-screening-backview {
		width: 90%;
		height: 50px;
		margin-left: 5%;
		display: flex;
		background-image: url(../../static/image/fjh/fengjihua_zhoubang_back.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		padding: 0px 25px;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.userInfo-bottom-lineView {
		width: 100%;
		height: 2px;
		background-color: white;
	}

	.list-userinfo-self {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: space-between; */
		background-color: black;
		position: fixed;
		bottom: 0;
	}

	.list-userinfo-honor {
		width: 325px;
		height: 35px;
		border-radius: 17.5px;
		background-color: #F3EB1D;
		line-height: 35px;
		text-align: center;
		color: black;
		font-size: 16px;
		font-weight: bolder;
		margin-left: 25px;
		margin-top: 55px;
	}

	.list-userInfo-listname {
		text-align: left;
		color: black;
		font-size: 13px;
		margin-left: 7.5px;
		max-width: 60px;
	}

	.list-userselfInfo-listname {
		text-align: left;
		color: white;
		font-size: 13px;
		margin-left: 7.5px;
		max-width: 70px;
	}

	.list-userInfo-rankImg {
		width: 15px;
		height: 17.5px;
		margin-left: 5px;
	}

	.list-userInfo-city {
		width: 100px;
		text-align: center;
		font-size: 13px;
		color: black;
	}

	.list-userSelf-city {
		width: 120px;
		text-align: center;
		font-size: 13px;
		color: white;
	}

	.list-userSelf-seletStr {
		width: 70px;
		text-align: center;
		font-size: 13px;
		color: white;
		margin-right: 5px;
	}

	.list-userInfo-seletStr {
		width: 100px;
		text-align: center;
		font-size: 13px;
		color: rgb(80, 80, 80);
		margin-right: 5px;
	}

	.numberColor {
		color: black;
		font-size: 15px;
	}

	.userSelfNumberColor {
		color: #F3EB1D;
		font-size: 15px;
	}

	.bottom-lineView {
		width: 385px;
		margin-left: 15px;
		height: 1px;
		background-color: rgb(201, 201, 201);

	}

	.mangerLeft {
		margin-left: 5px;
	}

	.list-userInfo-content {
		width: 165px;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-screening-content {
		align-items: center;
		font-size: 14px;
		font-weight: bolder;
		display: flex;
		flex-direction: row;
	}

	.list-screening-result {
		align-items: center;
		font-size: 14px;
		font-weight: bolder;
	}

	.red {
		color: red;
	}

	.green {
		color: green;
	}

	.whiteColor {
		color: white;
		font-size: 14px;
	}

	.rightTitle {
		width: 75px;
	}

	.mouthFontSize {
		font-size: 16px;
		padding: 0rpx 10rpx;
	}

	.list-screening-OnLadders {
		/* width: 70px; */
		font-size: 14px;
		color: red;
		font-weight: 600;
		text-align: center;
	}

	.weekNumberDayClass {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0px 7px;
	}
</style>